<template>
  <div class="home-box">
    <!-- 搜索 -->
    <div class="home-search">
      <div class="home-i">
        <van-icon name="apps-o" size="25" />
      </div>
      <Search />
      <div class="home-i">
        <van-icon name="user-circle-o" size="25" />
      </div>
    </div>
    <!-- 轮播 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      indicator-color="red"
    >
      <van-swipe-item v-for="(item, index) in swiper" :key="index">
        <img
          :src="
            'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' + item.adimg
          "
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 进度条商品 -->
    <div class="wrapper" ref="wrap">
      <div class="content">
        <div class="wrapper-cont" v-for="item in homemenulength" :key="item">
          <div class="align-box">
            <van-grid :border="false" :column-num="1" direction="vertical">
              <van-grid-item>
                <van-image
                  :src="
                    'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' +
                    homemenu[item * 2 - 2].picurl +
                    '?x-oss-process=image/resize,m_fill,w_120,h_120'
                  "
                />
                <div class="menu-title">{{ homemenu[item * 2 - 2].title }}</div>
              </van-grid-item>
            </van-grid>
            <van-grid :border="false" :column-num="1" direction="vertical">
              <van-grid-item>
                <van-image
                  :src="
                    'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' +
                    homemenu[item * 2 - 1].picurl +
                    '?x-oss-process=image/resize,m_fill,w_120,h_120'
                  "
                />
                <div class="menu-title">{{ homemenu[item * 2 - 1].title }}</div>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </div>
    <div class="homezt">
      <van-row>
        <van-col
        v-for="(item,index) in homezt"
        :key="index" 
        span="12"
        >
          <div style="display:flex;padding:0.5rem 0">
            <div class="homezt-title">{{item.title}}</div>
            <div style="display:flex" v-if="index==0">
              <van-count-down :time="time">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
            <div 
            class="biaoqian"
            v-if="item.biaoqian"
            :style="{backgroundColor:item.biaoqian_color}"
            >
              {{item.biaoqian}}
            </div>
          </div>
          <div v-for="(itm,idx) in item.list" :key="idx">
            <van-col span="12" style="padding:0 0.3rem">
            <div style="font-size:0.5rem;margin-bottom:0.3rem"
            :style="{color:itm.color}"
            >{{itm.subtitle}}</div>
            <div style="border-radius:0.4rem;overflow:hidden">
              <img 
              :src="'https://chadian-img.oss-cn-shanghai.aliyuncs.com/'+itm.picurl+'?x-oss-process=image/resize,m_fill,w_240,h_240'"
              style="width:100%;vertical-align: top;"
              >
            </div>
          </van-col>
          </div>
        </van-col>
      </van-row>
      <div style="display:flex" v-if="baseData">
        <div style="width:20%;line-height:3rem;margin-right:0.1rem;font-size:0.9rem">{{baseData.noticetitle}}</div>
        <div class="swiperli" style="width:80%;line-height:3rem">
          <van-swipe style="height: 30px;" vertical :autoplay="3000">
            <van-swipe-item v-for="(item,index) in baseData.noticelist.list" :key="index">{{item.title}}</van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <HomeShopList/>
  </div>
</template>

<script>
import HomeShopList from '../components/HomeShopList.vue'
import { Swiper } from "../api/xly-api.js";
import Search from "../components/Search.vue";
import BScroll from "@better-scroll/core";
import { GoodsList } from "../api/xly-api";
export default {
  name: "Home",
  data() {
    return {
      swiper: [],
      homemenu: [],
      homemenulength: 0,
      time: 30 * 60 * 60 * 1000,
      homezt:[],
      baseData:null,
      active:1,
      check:1,
      arr:[
        {
          title:'全部',
          name:'猜你喜欢'
        },
        {
          title:'视频',
          name:'产品更直观'
        },
        {
          title:'便宜好货',
          name:'低价抢购'
        },
      ],
      arrNum:0
    };
  },
  components: {
    Search,
    HomeShopList
  },
  created() {
    Swiper().then((res) => {
      this.swiper = res.data.data.ban_list;
    }),
      Swiper().then((res) => {
        //   console.log(res.data.data.list[4].list[0].ad_list[0].m_adimg);
        console.log(res.data.data);
        this.baseData = res.data.data
        this.homezt = res.data.data.homezt;
        this.GoodsName = res.data.data.list;
        this.homemenu = res.data.data.homemenu;
        this.homemenulength = res.data.data.homemenu.length / 2;
      });
  },
};
</script>
<style src='../assets/css/home.css'></style>
<style lang='less' scoped>
.shop-list{
  display: flex;
}
.shop-list1{
  color: #ee0a24;
}
.shop-list2{
  background-image: linear-gradient(90deg,#f60,#fb2020);
    background-color: #ee0a24;
    border-radius:1rem ;
    color: #fff;
}
/deep/.van-swipe__indicator--active{
  display: none;
}
:root {
  --van-swipe-indicator-inactive-background-color: #fff;
}
.home-box {
  padding: 0px 10px 0px 10px;
  color: rgba(0, 0, 0, 0.65);
  background-color: #f4f4f4;
}
.my-swipe {
  border-radius: 10px;
}
// .custom-indicator {
//     background-color: var(--van-swipe-indicator-inactive-background-color)
// }
.my-swipe .van-swipe-item {
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-swipe__indicator {
  background-color: #f4f4f4;
  .van-swipe__indicator--active {
    background-color: #f4f4f4;
  }
}
.box-list {
    padding: 0.21333rem 0;
    border-radius: 0.21333rem;
    margin-top: 0.26667rem;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
}

.middle-list {
    overflow-x: auto;
    white-space: nowrap;
}

.van-search {
    width: 85%;
}

.home-search {
    display: flex;
    justify-content: space-around;
}

.home-search div {
    display: flex;
}

.home-i .van-icon {
    padding-top: 60%;
}

.van-grid {
    width: 100%;
}

.align-box {
    width: 100%;
    display: inline-block;
    border-radius: .5rem;
}

.wrapper-cont {
    display: inline-block;
    width: 20%;
}

.menu-title {
    font-size: .7rem;
}

.wrapper {
    overflow: hidden;
    margin-top: .3rem;
}

.content {
    overflow-x: auto;
    white-space: nowrap;
    border-radius: .5rem;
    background-color: #fff;
}

.van-grid-item__content--center {
    border-radius: .5rem;
}

.van-grid-item>div {
    padding: 1px 11px;
}

.van-swipe__indicators>i {
    background-color: #fff;
    opacity: 1;
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}

.block {
    display: inline-block;
    width: 20px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: .2rem;
}
.homezt{
    background: #fff;
    margin-top: .4rem;
    padding: 0 0.8rem;
    border-radius:0.4rem ;
}
.homezt-title{
    font-weight: bold;
}
.biaoqian{
    color: #fff;
    font-size: 0.8rem;
    border-radius:0.2rem;
    padding: 0 0.1rem;
    text-align: center;
    line-height: 1.3rem;
    margin-left: 0.3rem;
}
.van-count-down{
    margin-left: 0.3rem;
}
.van-swipe-item{
    width: 100%;
    display: inline-block;
    color: #323232;
    font-size: .32rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.swiperli i{
    display: none;
}
</style>
